<template>
	<view class="page">
		<view class="content">
			<view class="main">
				<view class="title">
					我的信息
				</view>
				<view class="info-wrap">
					<view class="top">
						<view class="avatar">
							<image :src="user?.avatar" mode=""></image>
						</view>
						<view class="">
							{{user?.nickName}}
						</view>
					</view>
					<view class="bottom">
						<view class="tip">
							{{lastOrder?.dishOrder?.orderType == 1?'周餐客户':lastOrder?.dishOrder?.orderType == 2?'月餐客户':'普通用户'}}
						</view>
					</view>
				</view>
				<view class="title-small" v-if="foodList.length">
					减脂历程
				</view>

				<tn-swiper v-if="foodList.length" v-model="currentSwiperIndex" :data="foodList" width="100%" height="650" indicator indicator-active-bg-color="#01beff" indicator-bg-color="#ccc">
					<template #default="{ data }">
						<view class="swiper-data">
							<view class="list">
								<view class="list-item item-a" v-for="item in data" :key="item.id">
									<view v-if="item.headGroup == 1" class="right-text">
										团长
									</view>
									<view class="info">
										<view class="left">
											<image :src="item?.dishOrderBookList?.[0].dishImg" mode=""></image>
										</view>
										<view class="center">
											<text>{{item.createTime}}</text>
											<text>{{filterNum(item)}}顿</text>
											<view class="center-t">
												<text v-if="item.dishOrder?.bookBreakfast == 1">早上</text>
												<text v-if="item.dishOrder?.bookLunch == 1">中午</text>
												<text v-if="item.dishOrder?.bookDinner == 1">下午</text>
											</view>
										</view>
										<view class="right">
											<view class="text">
												<!-- <text>预估：</text> -->
												<!-- <text style="color: red;">13.5</text> -->
											</view>
											<view class="text">
												<!-- <text>13.8+13.8</text> -->
												<!-- <text style="margin-left: 2px;">共计：</text> -->
												<!-- <text style="color: red;">27.6</text> -->
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</tn-swiper>









				<view class="list" style="margin-top: 20rpx;">
					<view class="list-item item-a">
						<view class="count">
							<view class="count-item" v-for="(item,index) in bookDetailList" :key="index">
								<text>预定明日{{item.bookType}}：
									<text style="color: red;">{{item.bookPrice}}</text>
									元</text>
								<text>（现有参团</text>
								<text style="color: red;">{{item.joinNum}}</text>
								<text>份）</text>
							</view>
							<view class="count-tip" style="color: red;">
								说明：报餐时间为当日00:00至当日下午18:00,18:00为最终实际价格
							</view>
						</view>
					</view>
					<view class="list-item item-a">
						<view class="user">
							<text>我的拼餐地点：</text>
							<view class="user-right">
								{{lastOrder?.dishOrder?.areaName}}{{lastOrder?.dishOrder?.streetName}}{{lastOrder?.dishOrder?.road}}{{lastOrder?.dishOrder?.address}}
							</view>
						</view>
					</view>
					<view class="list-item">
						<view class="user">
							<text>我的联系方式：</text>
							<view class="user-right">
								{{filterMobile(lastOrder?.user?.mobile)}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useUser
	} from '@/hooks/user';
	import {
		fetchDishOrderSub,
		getBookDetail
	} from '@/api/order';
	import {filterMobile} from '@/filters';

	const foodList = ref([]);
	const bookDetailList = ref([]);
	const lastOrder = ref({});

	const filterNum = (item) => {
		const arr = [item.dishOrder?.bookBreakfast, item.dishOrder?.bookLunch, item.dishOrder?.bookDinner].filter(item =>
			item == 1);
		return arr.length;
	}

	const currentSwiperIndex = ref(0);
	const getDishOrderSub = async (user) => {
		const res = await fetchDishOrderSub({
			createUser: user.id
		});
		const sub = await getBookDetail();
		if (sub.data) {
			bookDetailList.value = sub.data;
		}
		if (res.data?.list) {
			const arr2 = [];
			const arr1 = res.data?.list || [];
			for (let i = 0; i < arr1.length; i += 3) {
			  arr2.push(arr1.slice(i, i + 3));
			}
			
			foodList.value = arr2 || [];
			lastOrder.value = res.data.list[0];
		}
	}


	const [user] = useUser((user) => {
		getDishOrderSub(user);
	});
</script>

<style lang="scss" scoped>
	.page {
		padding-top: 140rpx;
		overflow-y: scroll;
		padding-bottom: 188rpx;

		.content {
			.main {
				padding: 48rpx;

				.title {
					font-size: 42rpx;
				}

				.info-wrap {
					margin-top: 48rpx;
					width: 100%;
					// height: 300rpx;
					border-radius: 24rpx;
					background-color: #33354e;
					padding: 24rpx;
					box-sizing: border-box;

					.top {
						display: flex;
						align-items: center;
						color: #fff;

						.avatar {
							width: 160rpx;
							height: 160rpx;
							background-color: #ffffff;
							border-radius: 50%;
							margin-right: 20rpx;
						}
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;

						.tip {
							width: 165rpx;
							height: 50rpx;
							text-align: center;
							line-height: 50rpx;
							font-size: 26rpx;
							background-color: #ffffff;
							border-radius: 48rpx;
						}
					}
				}

				.title-small {
					padding: 24rpx 12rpx;
				}

				.list {
					width: 100%;
					overflow-y: scroll;
					border: 1px solid #ccc;
					border-radius: 24rpx;
					margin-bottom: 48rpx;

					&-item {
						position: relative;
						width: 100%;
						height: 200rpx;
						display: flex;
						align-items: center;

						.right-text {
							position: absolute;
							top: 12rpx;
							right: 12rpx;
							width: 120rpx;
							height: 60rpx;
							color: #ffffff;
							text-align: center;
							line-height: 60rpx;
							border-radius: 48rpx;
							background-color: orange;
						}

						.info {
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 100%;
							height: 100%;
							padding: 0 20rpx 0 48rpx;

							.left {
								width: 100rpx;
								height: 100rpx;
								border: 1px solid red;
							}

							.center {
								display: flex;
								align-items: center;
								flex-direction: column;

								&-t {
									display: flex;
									align-items: center;
									justify-content: space-between;
									width: 200rpx;
								}
							}

							.right {
								display: flex;
								align-items: flex-end;
								justify-content: space-evenly;
								flex-direction: column;
								font-size: 20rpx;
								margin-top: 24rpx;
								height: 100rpx;
							}
						}

						.user {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							padding: 0 24rpx;
							font-size: 27rpx;

							text {
								width: 220rpx;
							}

							&-right {
								font-size: 26rpx;
								padding: 8rpx 12rpx;
								border-radius: 48rpx;
							}
						}

						.count {
							padding-left: 30rpx;

							&-item {
								font-size: 27rpx;
								margin-bottom: 12rpx;
							}

							&-tip {
								font-size: 20rpx;
							}
						}
					}

					.item-a::after {
						position: absolute;
						left: 24rpx;
						right: 24rpx;
						bottom: 0;
						content: "";
						width: 90%;
						height: 1px;
						background-color: #ccc;
					}
				}
			}
		}
	}
</style>